<!--
 * @Description: 监测点信息
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:08
 * @LastEditors: Ronda
 * @LastEditTime: 2022-05-23 15:22:35
 11
-->
<template>
  <div>
    <el-row>
      <!-- 左边 -->
      <el-col :span="5">
        <div
          class="empData"
          style="border-right: 1px solid #ccc; height: calc(100vh - 60px)"
        >
          <el-input placeholder="输入关键字进行过滤" v-model="filterText">
          </el-input>

          <el-tree
            @node-click="handlerClick"
            class="filter-tree"
            :data="data"
            :props="defaultProps"
            :filter-node-method="filterNode"
            ref="tree"
          >
          </el-tree>
        </div>
      </el-col>
      <!-- 右边 -->
      <div v-if="params.device_id" class="table" style="margin-left: 10px">
        <el-col :span="19">
          <div class="content" style="height: 100%">
            <div>
              <h1>
                <el-button
                  style="margin-left: 10px"
                  icon="el-icon-s-order"
                  type="primary"
                  >工程信息</el-button
                >
              </h1>
              <br />
              <el-row style="height: 30px">
                <el-col :span="3">工程编号</el-col>
                <el-col :span="9">{{ empData.engineer.serial_number }}</el-col>
                <el-col :span="3">工程类型</el-col>
                <el-col :span="9">{{ empData.engineer.type }}</el-col>
              </el-row>
            </div>
            <br />
            <div :data="empData">
              <el-row>
                <el-col :span="3">工程名称</el-col>
                <el-col :span="9">{{ empData.engineer.name }}</el-col>
                <el-col :span="3">负责人编号</el-col>
                <el-col :span="9">
                  <el-select
                    v-model="value"
                    prop="empData.engineer.id"
                    :placeholder="empData.engineer.id"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option> </el-select
                ></el-col>
              </el-row>
            </div>
            <br />
            <div>
              <el-row>
                <el-col :span="3">地址</el-col>
                <el-col :span="9">{{ empData.engineer.address }}</el-col>
                <el-col :span="3">工程状态</el-col>
                <el-col :span="9"
                  ><div>
                    <el-tag
                      v-if="empData.engineer.status === '监测中'"
                      type="success"
                      >监测中</el-tag
                    >
                    <el-tag v-else type="warning">未监测</el-tag>
                  </div></el-col
                >
              </el-row>
            </div>

            <!-- <el-table :data="empData"> -->
            <!-- <el-table-column prop="serial_number" label="工程编号">
              </el-table-column>
              <el-table-column
                prop="engineer.name"
                label="工程名称"
                width="180"
              >
              </el-table-column>
              <el-table-column prop="engineer.type" label="工程类型">
              </el-table-column> -->

            <!-- <el-table-column prop="status" label="工程状态">
                <template v-slot="scope">

                  <div>
                    <el-tag v-if="scope.row.status === '监测中'" type="success"
                      >监测中</el-tag
                    >
                    <el-tag
                      v-else-if="scope.row.status === '未绑定'"
                      type="warning"
                      >未绑定</el-tag
                    >
                    <el-tag v-else type="danger">已结束</el-tag>
                  </div>
                </template>
              </el-table-column> -->

            <!-- <el-table-column prop="address" label="地址"> </el-table-column>
              <el-table-column prop="charge_name" label="工程负责人">
              </el-table-column>
            </el-table> -->
          </div>
          <hr />
          <!-- 下半部分 -->
          <div style="margin-top: 20px">
            <div class="content">
              <!-- <el-row> -->
              <div>
                <h1>
                  <el-button
                    style="margin-left: 10px"
                    icon="el-icon-video-camera-solid"
                    type="primary"
                    >设备信息</el-button
                  >
                </h1>
                <el-row>
                  <el-col :span="3">工程设备</el-col>
                  <el-col :span="9">{{ empData.serial_number }}</el-col>
                  <el-col :span="3"> 设备名称 </el-col>
                  <el-col :span="6"
                    ><div>
                      {{ empData.name }}
                    </div>
                  </el-col>
                  <el-col :span="3"
                    >
                    <el-button type="text" @click="toUpData">修改</el-button>
                  </el-col>
                </el-row>
              </div>
              <br />
              <div>
                <el-row>
                  <el-col :span="3">绑定状态</el-col>
                  <el-col :span="9"
                    ><div>
                      <el-tag v-if="empData.bind_status >= 1" type="success"
                        >已绑定</el-tag
                      >
                      <el-tag v-else type="warning">未绑定</el-tag>
                    </div></el-col
                  >
                  <el-col :span="3">在线数量</el-col>
                  <el-col :span="9">{{ empData.online_status }}</el-col>
                </el-row>
              </div>

              <!-- <el-table :data="empData">
                <el-table-column prop="serial_number" label="工程设备">
                </el-table-column>
                <el-table-column prop="name" label="设备名称">
                </el-table-column>
                <el-table-column prop="bind_status" label="绑定状态">
                  <template v-slot="scope">
                    <div>
                      <el-tag v-if="scope.row.status === '1'" type="success"
                        >已绑定</el-tag
                      >
                      <el-tag
                        v-else-if="scope.row.status === '0'"
                        type="warning"
                        >未绑定</el-tag
                      >
                      <el-tag v-else type="danger">已结束</el-tag>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="online_status" label="在线状态">
                  <template v-slot="scope">
                    <div>
                      <el-tag v-if="scope.row.status === '1'" type="success"
                        >在线</el-tag
                      >
                      <el-tag v-else type="warning">离线</el-tag>
                    </div>
                  </template>
                </el-table-column>
              </el-table> -->
              <!-- </el-row> -->
            </div>
          </div>
        </el-col>
      </div>
      <div v-else>
        <el-empty style="margin: 150px" description="请选择设备"></el-empty>
      </div>
    </el-row>
  </div>
</template>

<script>
// , postJSON, del
import { get } from "@/utils/request";
export default {
  // 监听文本进行过滤
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  data() {
    return {
      // 选择框数据
      options: [],
      value: "",
      // 设备采集数据
      empData: [],
      params: {
        page: 1,
        pageSize: 10,
        engineer_id: "",
        device_id: "",
      },
      // 树新结构数据源
      data: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      // 过滤文本
      filterText: "",
    };
  },
  computed: {},
  methods: {
    toUpData(){
      
    },
    toSearch() {
      this.getEmpData();
    },
    // 更改选择框
    changeValue() {
      console.log("123");
      this.loadEmpoption();
    },
    handlerClick(data) {
      // console.log(data,'---');
      if (!data.children) {
        this.params.engineer_id = data.engineer_id;
        this.params.device_id = data.id;
        // console.log(data.id);
      }
      this.getEmpData();
    },
    async getEmpData() {
      let obj = {};
      if (this.params.device_id) {
        // console.log(this.params.device_id, "+++");
        this.params.id = this.params.device_id;
        obj = {
          id: this.params.device_id,
        };
        // console.log(this.params);
        let res = await get("/device/findDeviceDetail", obj);
        // console.log(this.params.device_id,'+++');
        this.empData = res.data;
        this.loadEmpoption();
        // console.log(res.data,'+++');
      }
    },
    async loadEmpData() {
      let res = await get("/engineer/findEngineerDeviceTree");
      // console.log('res');
      // console.log(res.data,'***');
      this.data = res.data;
    },
    async loadEmpoption() {
      let res = await get("/engineer/findEngineerDeviceTree");
      let arr1 = [];
      // console.log(res.data,'//');
      res.data.forEach((item, index, arr) => {
        let obj = { label: item.id, value: index };
        arr1[index] = obj;
      });
      this.options = arr1;
      // console.log(arr1,'123');
    },
    filterNode(value, data) {
      if (!value) return true;
      // return data.label.indexOf(value) !== -1;
      return data.name.indexOf(value) !== -1;
    },
  },
  created() {
    this.loadEmpData();
    this.getEmpData();
  },
  mounted() {},
};
</script>
<style scoped>
</style>